<script>
import { computed, defineComponent, reactive, ref, toRaw } from 'vue'
import * as Antd from 'ant-design-vue'
import MakeForm, { MakeFormState } from '@Components/makeForm'
import { computedStringLength, allSpace } from '@Untils'
import { tagList } from '@Config/server/api'
export default defineComponent({
  components: {
    MakeForm,
  },
  props: {
    record: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  setup(props, context) {
    let record = computed(() => {
      return { ...toRaw(props.record) }
    })

    let pid = reactive({
      key: 'pid',
      initValue: record.value.pid || null,
      source: [],
      uiType: 'select',
      col: { span: 24 },
      formItem: { label: '所属分组' },
      attr: { placeholder: '请选择所属分组', allowClear: true },
    })
    tagList({ index: 1, size: 100000 }).then((x) => {
      pid.source = x.data?.records?.map((xxx) => {
        return {
          label: xxx.name,
          value: xxx.id,
        }
      })
    })
    let form_config = [
      {
        key: 'originId',
        initValue: record.value.pid,
        ignore: true,
      },
      {
        key: 'name',
        initValue: record.value.name || null,
        uiType: 'input',
        col: { span: 24 },
        formItem: { label: '名称' },
        attr: { placeholder: '请输入好友名称', allowClear: false, disabled: true},
        rule: [
          {
            required: true,
            message: '请输入分类名称',
          },
          {
            validator: allSpace,
            message: '请输入正确的分类名称',
          },
          {
            max: 30,
            message: '名称最长30个字符',
          },
          // {
          //   message: `分类名称不能超过${validator_config.cate_name_max_length}个字符`,
          //   maxStringLength: validator_config.cate_name_max_length,
          //   validator: (rule, value) => {
          //     let total = computedStringLength(value || '').total
          //     return total <= rule.maxStringLength
          //       ? Promise.resolve()
          //       : Promise.reject()
          //   },
          // },
        ],
      },
      {
        key: 'id',
        initValue: record.value.id || 0,
        ignore: true,
      },
      pid,
      {
        key: 'button',
        initValue: null,
        uiType: 'custom',
        col: { span: 24 },
        ui: (
          <Antd.Space>
            <Antd.Button
              type="primary"
              onClick={() => {
                form_ref.value.validate().then(() => {
                  loading.value = true
                  context.emit('result', {
                    info: { ...toRaw(form_state.data) },
                    iCallBack: () => {
                      loading.value = false
                      context.emit('close')
                    },
                  })
                })
              }}
              loading={loading.value}
            >
              确定
            </Antd.Button>

            <Antd.Button
              type="primary"
              danger
              onClick={() => {
                context.emit('close')
              }}
            >
              取消
            </Antd.Button>
          </Antd.Space>
        ),
      },
    ]
    let form_state = reactive({ data: MakeFormState(form_config) })
    let form_ref = ref(null)
    let loading = ref(false)
    return { form_config, form_state, form_ref, loading }
  },
  render() {
    return (
      <MakeForm
        ref="form_ref"
        formConfig={this.form_config}
        value={this.form_state.data}
      />
    )
  },
})
</script>
